<%--
  Created by IntelliJ IDEA.
  User: 86138
  Date: 2021/9/18
  Time: 19:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8" />
    <title>查看营业额</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">


    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<style type="text/css">

    #sales{
        float: left;
    }
    #dish_type_sales{
        float: right;
    }

    a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {text-decoration:none;}
    a:active {text-decoration:none;}
    p{
        font-family:georgia;
        font-weight: 200;
    }

    .header {
        font-size: 94%;
        opacity: 0.8;
        position: absolute;
        top: 0;
        width: 100%;
        height: 80px;
    }
    .header ul {
        list-style-type: none;
        background-color: #333;
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100%;
        height: 80px;
    }

    .header li {
        float: left;
        height: 80px;
        width: 200px;
        font-size: 150%;
    }

    .header li a {
        display: block;
        color: white;
        text-align: center;
        padding: 30px;
        text-decoration: none;
        height: 80px;
    }
    .header li a:hover:not(.active) {
        background-color: #111;
    }
    .container{
        left: 300px;
        position:absolute;
        width:1700px;
        height:1100px;
        top:80px;
        align-self: center;
        background-color: 	#dddce4;
        opacity: 0.8;
    }
    .totalSales{
        position: relative;
        width: 1500px;
        margin-left: 100px;
        height: 500px;
        float: left;
        margin-bottom: 100px;
    }
    .separateSales{
        position: relative;
        width: 1500px;
        float: left;
        height: 500px;
        left: 100px;
    }
    .dishSales{
        position: relative;
        width: 750px;
        float: left;
        height: 500px;
    }
    .typeSales{
        position: relative;
        width: 750px;
        float: left;
        height: 500px;
    }

</style>




<body>
<div class = "backGround" style="position: relative;">
    <img src = "../img/salary.jpg" width="2402px" height="1202px">
<div class="header">
    <ul>
        <li><a href="BookController?method=itemManageUI"><p>管理菜品</p></a></li>
        <li><a href="TradeController?method=toTradeManageUI"><p>查看订单</p></a></li>
        <li><a href="UserController?method=toFinanceUI"><p>查看营业额</p></a></li>
        <li><a href="UserController?method=toSalaryUI" ><p>查看业绩</p></a></li>
        <li style="float: right"><a href="index.jsp" ><p>退出登录</p></a></li>
    </ul>
</div>
<div class = "container">
    <div class = "totalSales">
        <div id="turnover" style="width: 1150px; height: 500px;  margin:0 auto; "></div>
        <script language="JavaScript">
            $(function() {
                $.post("TradeController?method=getRecentTrade", function(data) {
                    var data_labels = new Array(data.length);
                    var data_data = new Array(data.length);
                    for ( var i = 0; i < data.length; i++) {
                        data_labels[i] = data[i].date;
                        data_data[i] = data[i].money;
                    }

                    var title = {
                        text: '近期营业额'
                    };
                    var subtitle = {
                        text: '2021年'
                    };
                    var xAxis = {
                        categories: data_labels
                    };
                    var yAxis = {
                        title: {
                            text: '营业额 (KRMB)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    };

                    var tooltip = {
                        valueSuffix: 'KRMB'
                    }

                    var legend = {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    };

                    var series =  [
                        {
                            name: '营业额',
                            data:data_data
                        },

                    ];

                    var json = {};

                    json.title = title;
                    json.subtitle = subtitle;
                    json.xAxis = xAxis;
                    json.yAxis = yAxis;
                    json.tooltip = tooltip;
                    json.legend = legend;
                    json.series = series;

                    $('#turnover').highcharts(json);
                },'json');
            });
        </script>
    </div>
    <div class = "separateSales">
        <div class = "dishSales">
            <div id="sales" style="width: 650px; height: 500px;
                 margin: 0 auto"></div>
            <script language="JavaScript">
                $(function() {
                    $.post("BookController?method=getTopSaleDish",function(data) {
                        var data_sale_labels = new Array(10);
                        var data_sale_data = new Array(10);
                        for ( var i = 0; i < data.length; i++) {
                            data_sale_labels[i] = data[i].name;
                            data_sale_data[i] = data[i].sale;
                        }
                        var chart = {
                            type: 'column'
                        };
                        var title = {
                            text: '销量排行'
                        };
                        var subtitle = {
                            text: '销量排行'
                        };
                        var xAxis = {
                            categories: data_sale_labels,
                            crosshair: true
                        };
                        var yAxis = {
                            min: 0,
                            title: {
                                text: '销量 (份)'
                            }
                        };
                        var tooltip = {
                            valueSuffix: '份'

                        };
                        var plotOptions = {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        };
                        var credits = {
                            enabled: false
                        };

                        var series= [{
                            name: '销量',
                            data: data_sale_data
                        }];

                        var json = {};
                        json.chart = chart;
                        json.title = title;
                        json.subtitle = subtitle;
                        json.tooltip = tooltip;
                        json.xAxis = xAxis;
                        json.yAxis = yAxis;
                        json.series = series;
                        json.plotOptions = plotOptions;
                        json.credits = credits;
                        $('#sales').highcharts(json);

                    },'json');
                });
            </script>
        </div>
        <div class = "typeSales">

            <div id="dish_type_sales" style="width: 650px; height: 500px; margin: 0 auto"></div>
            <script language="JavaScript">
                $(function() {
                    $.post("BookController?method=getSaleDishType",function(data) {
                        var data_stock_labels = new Array(data.length);
                        var data_stock_data = new Array(data.length);

                        var data_stock_all=new Array(data.length);
                        var allsale=0;
                        for ( var i = 0; i < data.length; i++) {
                            allsale+=data[i].sale;
                        }

                        for ( var i = 0; i < data.length; i++) {
                            data_stock_labels[i] = data[i].dishType.name;
                            data_stock_data[i] = data[i].sale/allsale*100;

                            data_stock_all[i]=[data_stock_labels[i],data_stock_data[i]];
                        }
                        var chart = {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false
                        };
                        var title = {
                            text: '各大菜式销量'
                        };
                        var tooltip = {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        };
                        var plotOptions = {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    }
                                }
                            }
                        };
                        var series= [{
                            type: 'pie',
                            name: '销量占比',
                            data: data_stock_all
                        }];

                        var json = {};
                        json.chart = chart;
                        json.title = title;
                        json.tooltip = tooltip;
                        json.series = series;
                        json.plotOptions = plotOptions;
                        $('#dish_type_sales').highcharts(json);
                    },'json');
                });
            </script>
        </div>
    </div>
</div>
</div>
</body>
</html>

